<template>
	<view class="records">
	<!-- 	<u-navbar :bgColor="bgColor" title="看房记录" :titleStyle="titleStyle" leftIconColor="#ffffff"
			:autoBack="true"></u-navbar>

		<view class="" :style="{'height':globalData.navHeight-10 +'px'}"></view> -->


		<view class="tabs" style="position: fixed;">
			<view class="tabsitem" @click="handleTabs(0)">
				<view class="tabsitemtext" :class="{texted: currIndex ==0}">
					联系看房
				</view>
				<view v-if="currIndex ==0" class="H"></view>
			</view>

			<view class="tabsitem" @click="handleTabs(1)">
				<view class="tabsitemtext" :class="{texted: currIndex ==1}">
					购买记录
				</view>
				<view v-if="currIndex ==1" class="H"></view>
			</view>
		</view>

		<view class="" style="height: 88rpx;"></view>

		<view class="evaluate">
			<view class="title">
				未评价
			</view>
			<view v-if="nocomment.length>0" class="dataList">
				<view class="dataitem" v-for="(item,index) in nocomment" :key="index"
					@click="handleevaluatepage(item.id)">
					<view class="datatop">
						<view class="toptitle">
							{{item.house.name}}
						</view>
						<view class="">
							<image class="searchIcon" src="http://120.76.245.175/uploads/image/right.png"
								style="width: 36rpx; height: 36rpx;">
						</view>
					</view>

					<view v-if="currIndex == 0" class="datacontent">
						<view class="">
							联系姓名：{{item.show.name}}
						</view>
						<view class="" style="margin-top: 16rpx;">
							联系电话：{{item.show.mobile}}
						</view>
					</view>
					<view v-if="currIndex == 1" class="datacontent">
						<view class="">
							订单编号：{{item.order_sn}}
						</view>
						<view class="" style="margin-top: 16rpx;">
							提交时间：{{item.created_at}}
						</view>
					</view>
					<view class="btn">
						未评论
					</view>
				</view>
			</view>

			<view v-else class="">
				<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无未评价记录">
				</u-empty>
			</view>
		</view>

		<view class="evaluate">
			<view class="title">
				已评价
			</view>
			<view v-if="reviewedList.length>0" class="dataList">

				<view class="dataitem" v-for="(item,index) in reviewedList" :key="index">
					<view class="datatop">
						<view class="toptitle">
							{{item.house.name}}
						</view>
						<view class="">
							<image class="searchIcon" src="http://120.76.245.175/uploads/image/right.png"
								style="width: 36rpx; height: 36rpx;">
						</view>
					</view>
					<view v-if="currIndex == 0" class="datacontent">
						<view class="">
							联系姓名：{{item.show.name}}
						</view>
						<view class="" style="margin-top: 16rpx;">
							联系电话：{{item.show.mobile}}
						</view>
					</view>
					<view v-if="currIndex == 1" class="datacontent">
						<view class="">
							订单编号：{{item.order_sn}}
						</view>
						<view class="" style="margin-top: 16rpx;">
							提交时间：{{item.created_at}}
						</view>
					</view>
					<view class="btn" style="background-color: #CACACA;" @click="handleLookover(item.id)">
						查看评论
					</view>
				</view>
			</view>

			<view v-else class="">
				<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无已评价记录">
				</u-empty>
			</view>
		</view>
		
		

		<view class="" style="height: 100rpx;">

		</view>

	</view>
</template>

<script>
	import {
		houselookingorder
	} from "@/api/api.js"
	export default {
		data() {
			return {
				bgColor: "#F8AD22",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				currIndex: 0,
				type: 2,
				pageNum: 1,
				reviewedList: [],
				nocomment: [],
				datalength:"",
			}
		},
		onLoad() {
			this.getNavbarHeight()
			// this.gethouselookingorder()
		},
		onShow() {
			this.gethouselookingorder()
		},
		methods: {
			async gethouselookingorder() {
				this.reviewedList = []
				this.nocomment = []
				let res = await houselookingorder({
					type: this.type,
					page: this.pageNum,
					page_size: 10,
				})
				if (res.code == 1000) {
					res.data.data.forEach((item, index) => {
						if (item.evaluate == 0) {
							console.log("1111111111")
							this.nocomment.push(item)
						} else {
							console.log("2222222222")
							this.reviewedList.push(item)
						}
					})
					console.log("看房记录", this.reviewedList, this.nocomment)
				}
				// console.log("看房记录",res)
			},

			handleTabs(index) {
				this.currIndex = index
				index == 0 ? this.type = 2 : this.type = 1
				this.gethouselookingorder()
			},
			handleevaluatepage(id) {
				uni.navigateTo({
					url: `./evaluatepage?id=${id}`
				})
			},
			handleLookover(id) {
				uni.navigateTo({
					url: `./lookover?id=${id}`
				})
			},
			getNavbarHeight() {
				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				console.log("高度", this.globalData)

			},
		}
	}
</script>

<style scoped lang="scss">
	.records {
		.tabs {
			width: 100%;
			height: 88rpx;
			background: #FFFFFF;
			display: flex;

			.tabsitem {
				width: 50%;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;

				.H {
					width: 40rpx;
					height: 6rpx;
					background: #F8AD22;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					opacity: 1;


				}

				.texted {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #F8AD22;
					// line-height: 38rpx;
				}
			}
		}

		.evaluate {
			width: 690rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 33rpx;
			}

			.dataList {
				margin-top: 30rpx;

				.dataitem {
					padding: 24rpx 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin-bottom: 20rpx;

					.datatop {
						width: 100%;
						display: flex;
						justify-content: space-between;
						border-bottom: 1rpx solid #F7F8FA;

						.toptitle {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
							line-height: 33rpx;
						}
					}

					.datacontent {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 28rpx;
						margin-top: 24rpx;
					}

					.btn {
						width: 132rpx;
						height: 62rpx;
						background: #F8AD22;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 62rpx;
						text-align: center;
						margin-top: 44rpx;
						margin-left: 490rpx;
					}
				}

			}

		}

	}
</style>